<template>
  <ContentField>
    <div class="card-body animate__animated animate__bounceInUp" style="margin-top: 20px">
      <table class="table custom-table">
        <thead>
          <tr>
            <th class="col-2 animate__animated animate__bounceInDown th-title">玩家昵称</th>
            <th class="col-2 animate__animated animate__bounceInDown th-title">天梯分</th>
            <th class="col-2 animate__animated animate__bounceInDown th-title">段位</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="user in users"
            :key="user.id"
            class="selected-row animate__animated animate__fadeIn">
            <td>
              <div class="rank-name">
                <img
                  :src="user.photo + '?random=' + Math.random()"
                  alt=""
                  class="record-user-photo" />
                &nbsp;
                <span class="record-user-username"> {{ user.username }}</span>
              </div>
            </td>
            <td>
              <span>{{ user.rating }}</span>
            </td>
            <td>
              <div class="game-level">
                <span>
                  <img src="../../assets/images/最强王者.png" style="width: 10%; height: 10%" />
                  最强王者</span
                >
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <nav
      aria-label="..."
      class="nav-pagination animate__animated animate__bounceInUp"
      style="margin-right: 1.5vw">
      <ul class="pagination">
        <li class="page-item" @click="click_page(-2)">
          <a class="page-link" href="#">上一页</a>
        </li>
        <li
          :class="['page-item', page.is_active]"
          v-for="page in pages"
          :key="page.number"
          @click="click_page(page.number)">
          <a class="page-link" href="#">{{ page.number }}</a>
        </li>
        <li class="page-item" @click="click_page(-1)">
          <a class="page-link" href="#">下一页</a>
        </li>
      </ul>
    </nav>
  </ContentField>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { ref } from "vue";
import $ from "jquery";

export default {
  components: {
    ContentField,
  },
  setup() {
    const store = useStore();
    let users = ref([]);
    let current_page = 1;
    let total_users = 0;
    let pages = ref([]);

    const click_page = (page) => {
      if (page === -2) page = current_page - 1;
      else if (page === -1) page = current_page + 1;
      let max_pages = parseInt(Math.ceil(total_users / 8));
      if (page >= 1 && page <= max_pages) {
        pull_page(page);
      }
    };

    const update_pages = () => {
      let max_pages = parseInt(Math.ceil(total_users / 8));
      let new_pages = [];
      for (let i = current_page - 2; i <= current_page + 2; i++) {
        if (i >= 1 && i <= max_pages) {
          new_pages.push({
            number: i,
            is_active: i === current_page ? "active" : "",
          });
        }
      }
      pages.value = new_pages;
    };

    console.log(total_users);

    const pull_page = (page) => {
      current_page = page;
      $.ajax({
        url: "http://127.0.0.1:3000/ranklist/getlist/",
        type: "get",
        headers: {
          Authorization: "Bearer " + store.state.user.token,
        },
        data: {
          page,
        },
        success(resp) {
          users.value = resp.users;
          total_users = resp.users_count;
          update_pages();
        },
        error(resp) {
          console.log(resp);
        },
      });
    };

    pull_page(current_page);

    return {
      users,
      pages,
      click_page,
    };
  },
};
</script>

<style scoped>
img.record-user-photo {
  width: 4vh;
  border-radius: 50%;
}

.custom-table {
  background-color: transparent;
  color: white;
  /* border: 2px solid rgb(13, 202, 240); */
  border-collapse: separate;
  border-spacing: 0;
}

.custom-table th,
.custom-table td {
  border: 0px solid rgb(255, 255, 255);
  text-align: center;
  padding: 8px;
}

.custom-table {
  color: rgb(255, 255, 255);
}

.selected-row {
  height: 7.5vh;
}

.selected-row:hover {
  color: rgb(13, 202, 240);
  background-color: rgba(50, 50, 50, 0.35);
  animation: shake 0.5s;
}

@keyframes shake {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

button.btn:hover {
  color: white;
  animation: shake 0.5s;
}

@keyframes shake {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.nav-pagination {
  position: fixed;
  bottom: 8vh; /* 调整距离底部的距离 */
  right: 10vw; /* 调整距离右侧的距离 */
}

.pagination {
  float: right;
}

.page-item {
  border: 1px solid rgb(13, 202, 240);
}

.page-link {
  background-color: transparent;
  color: rgb(13, 202, 240);
  border: none;
}

.page-item.active {
  background-color: rgb(13, 202, 240);
}

.page-item.active .page-link {
  color: white;
}

.th-title {
  color: rgb(13, 202, 240);
}

.rank-name {
  margin-left: 35%;
  text-align: left;
}

.game-level {
  text-align: left;
  margin-left: 35%;
}
</style>
